<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>验证码</title>
     <style type="text/css">
      /* 第三步：把四个显示验证码的小方格样式写好 */
      .container{
            /* height: 150pt; */
            margin: 0 auto;
            width:200px;
            margin: 300px auto;
        }
        .val-box{
            display: flex;
            /* height: 100%;
            width: 100%; */
           
            text-align: center;
            position: relative;
            background: rgba(255,255,255,0);
            justify-content: space-around;
        }
        .val-box input[type=text]{
            position: absolute;
            left:0;
            top:0;
            height:34px;
            width: 212px;
            z-index: -999;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            background-color: rgba(255,255,255,0);
        }
        .val-box div{
            /* height: 100%;
            width: 20%; */
            width: 34pt;
            height: 30pt;
            border:3px solid #999999;
            background:#fff;
            border-radius: 5px;
            float: left;
            margin: 2px 2.5%;
            z-index: 5;
            font-size: 1.5em;
            font-family: arial;
            text-align: center;
            line-height: 1.5em;
            cursor:text;

        }
        .val-box .available{
           border:3px solid red;
        }
    </style>
</head>
<body style="background-color: #000">
    <!-- 第一步：我们写一个text用于存放验证码 -->
    <!-- 验证码真实存放其实在text里面，每次输入数字后会把验证码后，会把验证码一个个在下面的div中显示 -->
    <!-- checkForNum用于判断是否是数字，不是就过滤掉 -->
    <div class="container" id="test">
        <div>
            <input type="text" id="val-code-input" maxlength="4" onkeyup="checkForNum(this)" onselectstart="return false;" onblur="checkForNum(this)">
        </div>
        <!-- 第二步：我们写四个div，主要作用是用于显示验证码的每个数字 -->
        <div class="val-box" id="val-box">   
            <div name="val-item"></div>
            <div name="val-item"></div>
            <div name="val-item"></div>
            <div name="val-item"></div>
        </div>
      </div>
</body>
<script src="./js/jquery-1.8.3.min.js"></script>
<!-- 第四步：开始写js -->
<script type="text/javascript">
    var valCodeInput = $("#val-code-input");
    var valCodeItems = $("div[name='val-item']");
    var regex = /^[\d]+$/;
    var valCodeLength = 0;
    // 当我们点四个小格的时候，会把焦点放在input输入框中
    $('#val-box').on('click',function(){
        console.log("聚焦")
        valCodeInput.focus();
        
    })
    
    // 输入框改变后，把里面的数字取出来，分别显示到四个div中
    valCodeInput.on('input propertychange change', function(e){
        valCodeLength = valCodeInput.val().length;
        if(valCodeInput.val() && regex.test(valCodeInput.val())) {
            $(valCodeItems[valCodeLength - 1]).removeClass('available');
            $(valCodeItems[valCodeLength - 1]).addClass('available');
            $(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
        }
    })
    // 点击获取验证码或点击第一个数字输入框时获取焦点,添加available类样式
    $(".val-box div").on("click",function(){
        $(valCodeInput).focus();
        $(valCodeItems[0]).addClass('available');
    })
    // 删除键，每删除输入框中一个数字valCodeLength计算的长度就会减少一个
    // 就去删除对应小格中的数字，并且移走available类样式
    $(this).on('keyup', function(e){
        if(e.keyCode === 8) {
            $(valCodeItems[valCodeLength]).text("");
            if(valCodeLength !== 0){
                $(valCodeItems[valCodeLength]).removeClass('available');
            }
        }
    });
    // 当验证码输入满四个数字的时候，就开始判断是否正确
    $(valCodeInput).on("input propertychange",function(){
        if (valCodeInput.val().length == 4) {
            if(valCodeInput.val()=='8888')
            {
               console.log('验证码正确');
            }
            else
            {
                console.log('验证码错误');
            }
           
        }
    })
    
    //把所有输入的不是数字的字符转换为空值
    function checkForNum(obj) {
       obj.value = obj.value.replace(/[\D]/g, '');
    }
</script>
</html>